<template>
	<view class="tabs">
		<view class="collect">
			<uni-icons :color="introduce.isCollect?'#f63842':'#999'" :type="introduce.isCollect?'heart-filled':'heart'" size="26" @click="handleCilck"></uni-icons>
		</view>
		<view class="buy-course" @click="buyCourse">
			购买课程￥{{introduce.course.charge}}
		</view>
		<view class="buy-video" @click="buyVideo">
			购买此视频￥{{introduce.course.charge}}
		</view>
	</view>
</template>

	
<script>
	
	export default {
		name:"courseTab",
		 props:{
		 	introduce:{
				type:Object,
				required:true
		 	}
			},
		data() {
			return {
			};
		},
		methods:{
			handleCilck(){
					//这里改变了状态值，需要通知给父元素，进行状态值的更改
					this.introduce.isCollect = !this.introduce.isCollect
					this.$emit('myIsCollect',this.introduce.isCollect)
				 // console.log(this.introduce.isCollect,'函数')
			},
			async buyCourse(){
				console.log(this.introduce.isCollect)
				 this.$emit('buyCourse')
	
			}
		},
		watch:{
			
		}
	}
</script>

<style lang="less" scope>
.tabs{
	height: 100rpx;
	background-color: #fff;
	 position: fixed;
	 max-width: 100%;
	 width: 100%;
	 left: 0;
	 bottom: 0;
	display: flex;
	font-size: 26rpx;
	.collect{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
	}
	.buy-course{
		flex: 1;
		background-color: #28a4f3;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
	.buy-video{
		flex: 1;
		background-color: #ffeda9;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #d9a506;
	}
}
</style>
